<template>
  <div class="dashboard-editor-container">
    <el-row  :gutter="20">
      <el-col span="8"    >

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>待办事项</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div  :data="tableData"  class="text item">
            werewr
          </div>
        </el-card>

  <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>业务处理</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div  :data="tableData"  class="text item">
            werewr
          </div>
        </el-card>


  <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>网站访问情况</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div    class="text item">



            <el-table
                    :data="tableData"
                    style="width: 100%">
              <el-table-column
                      prop="userpv"
                      label="浏览量(PV)"
              >
              </el-table-column>
      <el-table-column
                      prop="useruv"
                      label="访客数(UV)"
              >
              </el-table-column>
      <el-table-column
                      prop="userip"
                      label="独立IP(IP)"
              >
              </el-table-column>


            </el-table>

          </div>
        </el-card>


      </el-col>
      <el-col span="16" >


        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单统计报表</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div     class="text item">



            <div ref="initCharts" :style="{height: '400px',width:'100%'}"  ></div>



          </div>
        </el-card>




        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>业务处理</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div  :data="tableData"  class="text item">
            <el-table
                    :data="tableData"
                    style="width: 100%">

              <el-table-column
                      prop="date"
                      label="排名"
              >
              </el-table-column>

              <el-table-column
                      prop="date"
                      label="商品名称"
              >
              </el-table-column>

              <el-table-column
                      prop="date"
                      label="数量"
              >
              </el-table-column>


            </el-table>
          </div>
        </el-card>












      </el-col>

    </el-row>
  </div>
</template>
<style>
  .el-col > .el-table {
    margin-top: 20px;
  }


</style>
<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
// import GithubCorner from '@/components/GithubCorner'

//全部引入
var echarts = require('echarts')


export default {

  name: 'DashboardEditor',
  components: { PanThumb },
  data() {
    return {
      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3' // '/resource/img/walk.gif'
    , imageurls :""
        ,
        tableData: [{
            todojobs: '您有23个订单需要处理',
            businessprodate: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            todojobs: '您有45个企业需要认证核验',
            businessprodate: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            todojobs: '您有235条消息需要处理',
            businessprodate: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            todojobs: '您有23笔退款需要处理',
            businessprodate: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }]

    }

  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
    mounted() {
        this.initCharts();
    },
    methods: {
        initCharts() {
            this.chart = echarts.init(this.$refs.initCharts);
            this.setOptions();
        },
        setOptions() {
            this.chart.setOption({

                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            })
        }
    },
    watch: {

    }
}

</script>

<style lang="scss" scoped>
  .emptyGif {
    display: block;
    width: 45%;
    margin: 0 auto;
  }

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 10px 10px 0px;
    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
    }
    .info-container {
      position: relative;
      margin-left: 190px;
      height: 150px;
      line-height: 200px;
      .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 25px;
      }
    }
  }
</style>
